<template>
    <div class="mainWrap">

        <div class="containter">
            <div v-if="videoList.length ">
                <div class="mainContainer">
                    <div class="mask" v-loading="recommendStore.loading" element-loading-text="正在加载中..."
                        element-loading-background="#f5f7f9"></div>
                    <!-- 小卡片 -->
                    <div class="cardContainer" v-for="(card,index) in videoList" :key="card.id">
                        <div class="cardHeader">
                            <a :href="card.router.slice(6)" target="_blank">
                                <img v-lazy="card.cover[0]"  alt="">
                                <img class="playBtn" src="@/assets/images/release_play@3x.fb313c4d.png" alt="">
                            </a>
                        </div>
                        <div class="cardMain">
                            <div class="title">
                                <a :href="card.router.slice(6)" target="_blank">
                                    <span></span>
                                    {{card.title}}
                                </a>
                            </div>
                            <div class="pageviews">
                                {{card.statisticsBackup?.viewCount}}人浏览
                            </div>
                            <div class="give">
                                <span class="giveItem">
                                    <svg t="1666095789079" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="31631" width="16" height="16">
                                        <path
                                            d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667z"
                                            p-id="31632" fill="#b1b5c1"></path>
                                    </svg>
                                    <span>{{card.statisticsBackup?.praiseCount}}</span>
                                </span>
                                <span class="giveItem">
                                    <svg t="1666096171135" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="32839" width="16" height="16">
                                        <path
                                            d="M877.770752 117.979136 145.767424 117.979136c-48.29184 0-87.442432 39.149568-87.442432 87.442432l0 557.44512c0 45.319168 34.4832 82.593792 78.641152 87.005184 2.894848 0.290816 5.827584 0.437248 8.80128 0.437248l23.360512 0c0 13.395968 0 48.223232 0 48.412672 0 20.891648 19.955712 22.863872 33.73568 13.868032 12.46208-8.141824 25.017344-16.11776 37.818368-23.707648 25.228288-14.949376 54.482944-32.991232 84.23424-38.573056l95.666176 0 457.188352 0c48.289792 0 87.442432-39.149568 87.442432-87.442432l0-557.44512C965.213184 157.128704 926.060544 117.979136 877.770752 117.979136zM243.931136 530.92864c-34.00192 0-61.565952-27.56096-61.565952-61.56288s27.563008-61.565952 61.565952-61.565952 61.56288 27.563008 61.56288 61.565952S277.93408 530.92864 243.931136 530.92864zM514.653184 530.92864c-34.00192 0-61.565952-27.56096-61.565952-61.56288s27.563008-61.565952 61.565952-61.565952c33.999872 0 61.56288 27.563008 61.56288 61.565952S548.653056 530.92864 514.653184 530.92864zM779.606016 530.92864c-34.00192 0-61.568-27.56096-61.568-61.56288s27.56608-61.565952 61.568-61.565952c34.00192 0 61.565952 27.563008 61.565952 61.565952S813.60896 530.92864 779.606016 530.92864z"
                                            p-id="32840" fill="#b1b5c1"></path>
                                    </svg>
                                    <span>{{card.statisticsBackup?.commentCount}}</span>
                                </span>
                                <span class="giveItem">
                                    <svg t="1666096214963" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="33917" width="16" height="16">
                                        <path
                                            d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z"
                                            p-id="33918" fill="#b1b5c1"></path>
                                    </svg>
                                    <span>{{card.statisticsBackup?.favoriteCount}}</span>
                                </span>
                            </div>
                        </div>
                        <div class="cardFooter">
                            <div class="left">
                                <img :src="card.creatorBackup?.avatar" alt="">
                                <div>{{card.creatorBackup?.name}}</div>
                            </div>
                            <span class="right">{{moment(card.updateTime).format("MM-DD")}}</span>
                        </div>
                    </div>

                </div>
                <div class="divBtn" @click="clickHandler">加载更多</div>

            </div>
            <div class="noData" v-else>
                <div class="load" v-loading="recommendStore.loading" element-loading-text="正在加载中..."
                        element-loading-background="#f5f7f9"></div>
                <img src="@\assets\images\no_content@3x.0fd78ad2.png" alt="">
                <p>无更多数据</p>
            </div>




        </div>

    </div>
</template>

<script setup lang="ts">

import { useRouter, useRoute } from "vue-router"
import { reactive, ref, onMounted, watch } from 'vue'
import useRecommendStore from "@/stores/recommend";
import moment from "moment";
import { reqVideoCardList } from "@/api/discovery/discovery";
const recommendStore = useRecommendStore();
const router = useRouter();
const route = useRoute();



const props = defineProps(["videoList"]);
const emit = defineEmits(["getList"]);
// 滚动时自动 发请求获取列表的次数
const count = ref(0);
let flag = ref(false);

// 点击按钮时，再次获取数据
const clickHandler = () => {

    emit("getList");

}



onMounted(() => {
    
    
    // 监听滚动条
    window.addEventListener("scroll", async () => {

        // 可视窗口高度 document.documentElement.clientHeight
        //总页面高度  document.body.clientHeight
        //滚动条位置 document.documentElement.scrollTop
        // 滚动条最大位置 + 可视窗口 = 总页面
        //求总页面-滚动条位置 - 可视窗口 的值    等于0 表示刚好触底
        let height = document.body.clientHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        // 总页面除以  可视窗口的高度的余数
        let num = document.body.clientHeight % document.documentElement.clientHeight;
        if (height > 400) {
            return;
        }

        if (flag.value) {
            return;
        }
        flag.value = true;
        emit("getList");
        count.value++;
        console.log(count.value);

        setTimeout(() => {
            flag.value = false;
        }, 5000)
    })
})





</script>

<style scoped>
.mainWrap {
    width: 100%;
    /* height: 1300px; */
    background-color: #f5f7f9;
    cursor: pointer;
}

.containter {
    width: 1200px;
    padding-top: 20px;
    margin: 0 auto;
    overflow: hidden;
}

.mainContainer {
    width: 1240px;
    overflow: hidden;
    position: relative;

}

.mask {
    width: 1200px;
    height: 300px;
    position: absolute;
    z-index: 456;
    pointer-events:none;


}

.cardContainer {
    background-color: #fff;
    width: 224px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
    float: left;
}

.cardContainer img {
    width: 100%;
    height: 100%;
}

/* 卡片头部 */
.cardHeader {
    height: 126px;
}

.cardHeader a {
    position: relative;
}

.cardHeader a .playBtn {
    position: absolute;
    bottom: 6px;
    left: 10px;
    width: 30px;
    height: 30px;
    z-index: 44;
}

/* 卡片中间 */
.cardMain {
    height: 104px;
    padding: 10px 10px 13px 10px;
    border-bottom: 1px solid #b1b5c1;
    box-sizing: border-box;
}

.cardMain .title a {
    height: 36px;
    text-decoration: none;
    color: #000;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: pre-wrap;

}

.cardMain .title a span {
    box-sizing: border-box;
    margin-right: 6px;
    display: inline-block;
    width: 24px;
    height: 16px;
    vertical-align: bottom;
    background: url(https://rs.dance365.com/title_original.svg) no-repeat;
    background-size: cover;
}

.cardMain .pageviews {
    color: #b1b5c1;
    font-size: 12px;
    height: 32px;
    line-height: 32px;
}

.cardMain .give {

    color: #b1b5c1;
    font-size: 12px;
    line-height: 12px;
    display: flex;


}

.cardMain .give .giveItem {
    margin-right: 20px;
    display: flex;
    align-items: center;
}

/* 卡片脚 */
.cardFooter {
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    align-items: center;
    font-size: 12px;
}

.cardFooter .left {
    display: flex;
    align-items: center;
}

.cardFooter .left img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;

}

.cardFooter .right {
    color: #b1b5c1;
}

.divBtn {
    width: 140px;
    height: 40px;
    border: 1px solid #eaecf0;
    background-color: #fff;
    text-align: center;
    line-height: 40px;
    margin: 24px auto;
    border-radius: 4px;
    font-size: 14px;
    color: #82858e;
    margin-bottom: 60px;
}

.noData {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600px;
    margin-bottom: 200px;
    position: relative;


}
.noData .load{
    position: absolute;
    width: 1200px;
    height: 400px;
    
}

.noData img {
    width: 255px;
    height: 255px;
}

.noData p {
    margin: 20px auto 40px;
    color: rgb(177, 181, 193);
}
</style>